
@import "../chameleon/oniui-theme";
$uiname: "oni-textbox";
.#{$uiname} {
    @include inline-block();
    outline: medium none;
    font-size: 0;
    line-height: 18px;
    @if($oinui-theme == smoothness) {
        background-color: #FFFFFF;
    }

    .#{$uiname}-input-wrap {
        position: relative;
        @include inline-block();
        overflow: hidden;
        line-height: 18px;
        .#{$uiname}-input {
            position: relative;
            float: left;
            display: inline;
            vertical-align: middle;
            height: 18px;
            line-height: 18px;
            outline: medium none;
            font-size: 12px;
            margin: 0;
            padding: 3px 5px;
            border: 1px solid #CCCCCC;
            box-shadow: inset 0 0 0 rgba(0,0,0,0.75);
            @if($oinui-theme == smoothness) {
                background-color: #FFFFFF;
                color: #333333;
            }
        }
        textarea.#{$uiname}-input {
            height: 60px;
            resize: none;
        }
    }
    .#{$uiname}-placeholder {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 14px;
        z-index: 1;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-all;
        @if($oinui-theme == smoothness) {
            color: #999;
        }
    }
    .#{$uiname}-suggest {
        position: relative;
        z-index: 1000;
    }
    @at-root .#{$uiname}-disabled {
        background-color: $ui-state-disabled-background-color;
        border-color: $ui-state-disabled-border-color;
        cursor: default;
        .#{$uiname}-placeholder {
            @if($oinui-theme == smoothness) {
                color: #ccc;
            }
        }
        .#{$uiname}-input {
            cursor: default;
            background-color: $ui-state-disabled-background-color!important;
            @if($oinui-theme == smoothness) {
                color: #ccc!important;
            }
        }
        &.#{$uiname}-hover {
            border-color: $ui-state-disabled-border-color;
        }
    }
}
.#{$uiname}-hover {
    @if($oinui-theme == smoothness) {
        border-color: #999;
    }
}
.#{$uiname}-focus {
    @if($oinui-theme == smoothness) {
        border-color: $ui-state-active-border-color;
    }
}
.#{$uiname}-error {
    border-color: $ui-state-error-border-color;
}
